<template>
  <div class="dk-dashboard">
    <dk-top-icon :dashboard="dashboard" />
    <dk-count-content :dashboard="dashboard" />
    <dk-dashboard-footer />
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useUserStore } from '@/stores/user'
// import auth from '@/directive/auth'

import DkTopIcon from './components/DkTopIcon.vue'
import DkCountContent from './components/DkCountContent.vue'
import DkDashboardFooter from './components/DkDashboardFooter.vue'
import { getDashboard } from '@/api'

// 指令
// const vAuth = auth

// 状态
const dashboard = ref({
  loading: false,
  platform: [],
  visit: {}
})

// 使用 pinia store 代替 vuex
const userStore = useUserStore()
const userinfo = computed(() => userStore.user)

// 生命周期
onMounted(() => {
  getDashboard().then((res) => {
    // TODO 这里如果没有创建平台，前端会报错
    dashboard.value = res.data
  })
})
</script>

<style>
.dk-dashboard {
  padding: 20px;
  background: var(--el-bg-color-page);
  height: calc(100vh - 50px);
}

.el-card {
  @apply rounded-10px mb-5;
}

.el-card__body {
  @apply relative;
}

@media screen and (max-width: 750px) {
  .el-card {
    @apply mb-2.5;
  }
}
</style>
